import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {
  Button,
  Dialog,
  Text,
  TextField,
  TouchableOpacity,
  View,
  RadioButton,
  RadioGroup,
} from 'react-native-ui-lib';
import {commonStyles} from '../../../configs/commonStyle';
import {Icon} from '../../components';
import {isAndroid} from '../../../configs/platform';
import {disposeParts} from '../../../net/transfer';
import ToastUtils from '../../../utils/ToastUtils';
import {inject} from 'mobx-react';

/**
 * 添加备注
 */
@inject('userStore')
export default class PartsAbnormalDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: '',
      dataInfo: {},
      isOpen: false,
      remark: '',
    };
  }

  show = ({dataInfo, type = '无货'}) => {
    this.setState({isOpen: true, dataInfo, type});
  };

  // 提交异常
  handleAbnormalSubmit = () => {
    const {dataInfo, remark, type} = this.state;
    this.dismiss();
    disposeParts({
      id: dataInfo.id,
      orderId: dataInfo.orderId,
      orderDetailId: dataInfo.orderDetailId,
      remark: type == '其他' ? remark : type,
      goodsName: dataInfo.goodsName,
    })
      .then(res => {
        ToastUtils.showSuccessInfo('提交成功');
        this.props.callback && this.props.callback();
      })
      .catch(err => {
        ToastUtils.showFailInfo(err?.msg || '失败，请重试');
      });
  };

  dismiss = () => {
    this.setState({isOpen: false});
  };

  renderPannableHeader = props => {
    const {dataInfo} = this.state;
    return (
      <View>
        <View margin-10 row centerV spread>
          <View flex centerV>
            <Text style={{...commonStyles.text_black_17}}>{`${
              dataInfo?.goodsName || ''
            }（${dataInfo?.xmbzNo}）`}</Text>
          </View>
          <TouchableOpacity onPress={this.dismiss}>
            <Icon type="AntDesign" name={'close'} size={16} color={'#282828'} />
          </TouchableOpacity>
        </View>
        <View height={1} bg-line />
      </View>
    );
  };

  render() {
    const {isOpen, remark, type} = this.state;
    return (
      <Dialog
        migrate
        width={'100%'}
        height={'50%'}
        bottom
        containerStyle={styles.roundedDialog}
        visible={isOpen}
        onDismiss={this.dismiss}
        renderPannableHeader={this.renderPannableHeader}>
        <View padding-15>
          <Text>请选择异常原因:</Text>
          <RadioGroup
            style={styles.container}
            initialValue={this.state.type}
            onValueChange={value => {
              this.setState({type: value});
            }}>
            <RadioButton value={'无货'} label={'无货'} />
            <RadioButton value={'损坏'} label={'损坏'} />
            <RadioButton value={'其他'} label={'其他'} />
          </RadioGroup>
          {type == '其他' ? (
            <View style={styles.textInput}>
              <TextField
                multiline
                hideUnderline
                black333
                maxLength={500}
                value={remark}
                containerStyle={{flex: 1}}
                onChangeText={remark => this.setState({remark})}
                text14
                showCharacterCounter={isAndroid()}
                placeholder="输入异常信息..."
              />
            </View>
          ) : null}
          <Button
            label={'确认提交'}
            marginT-20
            color={'#49493D'}
            onPress={() => {
              this.handleAbnormalSubmit();
            }}
            style={{backgroundColor: '#FED13F'}}
            borderRadius={7}
          />
        </View>
      </Dialog>
    );
  }
}

const styles = StyleSheet.create({
  roundedDialog: {
    backgroundColor: 'white',
  },
  textInput: {
    minHeight: 150,
    borderWidth: 1,
    marginBottom: 10,
    padding: 10,
    borderRadius: 12,
    borderColor: '#eeeeee',
    backgroundColor: '#F0F0F0',
  },
  container: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around',
    flexDirection: 'row',
    margin: 20,
  },
});
